<template>
    <div id="InflowDetail">
         <div v-if="limts" class="jx-content s-part2" style="padding-top: 100px;height:450px; text-align:center;">
            <img src='../../../assets/images/noAsscess.png'/>
            <span style="display: block; padding: 15px 0; color: rgb(151, 151, 151);">暂无权限</span>
        </div>
       <div class="jx-content s-part2" v-else>
           <div class='questionall'>
                <div style='overflow:hidden; padding:10px 0'>
                   <h3 class='fl tilt'>{{list.problemName}}</h3>
                    <div class="btn-group fr">
                      <span>{{list.problemCount}} 回复</span>
                    </div>
                </div>
                <div class='countinfo'>
                   <img :src="list.icon">
                   <span class='studentname'>{{list.userName}}{{list.roleName}}</span>
                   <span class='timeicon'>
                        <i class="iconfont  icon-shijian"></i>
                        <span class='times'>{{list.problemTime}}</span>
                    </span>
                </div>
                <div class='question-count'>
                  <p class='markdown-body' v-html="list.problemContent"></p>
                </div>
           </div>
           <div class='my-reply' v-if="replay.length>0">
              <p class='title'>全部回答</p>
              <ul>
                 <li v-for="(item,index) in replay" :key="index">
                     <div class='my-reply-li'>
                        <div class='fl my-img'>
                            <img :src="item.icon">
                        </div>
                        <div class='fl my-info'>
                            <div class='my-info-top'>
                                <span class='stuname' v-if="item.role==2"> {{item.userName}}{{item.roleName}}</span>
                                <div class='teachername' style='display:inline-block'  v-if="item.role==1 || item.role==5 || item.role==6">
                                    <!-- 1 普通老师  5高校 6销售  2学生-->
                                    {{item.userName}}
                                    <i id='triangle-left'></i>
                                    <i class='square'></i>
                                    <b class='teacher'>{{item.roleName}}</b>
                                </div>
                                <span class='timeicon'  v-if="item.role==1 || item.role==5 || item.role==6"  style="margin-left:-50px;">
                                    <i class="iconfont  icon-shijian"></i>
                                    <span class='times'>{{item.answerTime}}</span>
                                </span>
                                    <span class='timeicon'  v-if="item.role==2">
                                    <i class="iconfont  icon-shijian"></i>
                                    <span class='times'>{{item.answerTime}}</span>
                                </span>
                            </div>
                            <div class='my-info-bot'>
                                <p class='markdown-body' v-html="item.answerContent"></p>
                            </div>
                        </div>
                     </div>
                 </li>
              </ul>
           </div>
           <div class='you-reply'>
              <p class='title'>你的回答</p>
                <mavonEditor ref="youquestion" class='youquestion' v-if="forbidden==true" :editable='editable'></mavonEditor>
                <mavonEditor ref="youquestion" class='youquestion' v-if="forbidden==false" :editable='!editable'></mavonEditor>
              <div class="btn-group">
                    <button  class="button-style question-submit" @click='submit' v-if="forbidden==false">提 交</button>
                    <button  class=" question-submit-dark"   v-if="forbidden==true">提 交</button>
             </div>
           </div>
       </div>
    </div>
</template>

<script>
    import mavonEditor from "../../../components/mavonEditor";
    export default {
        props: ['websockMsg'],
        components: { mavonEditor },
        data () {
            return {
                //权限控制
                limts:'',
                //课程id
                courseId:'',
                //是否是禁言
                forbidden:'',
                editable:false,
                id:'',
                list:{},
                replay:[]
            }
        },
        created() {
          this.id=this.$route.query.id
          this.courseId = this.$localstorage.getLocalStorage('setCourseId')
          this.limts = this.$localstorage.getLocalStorage('limts')
          this.init()
          //消息通知执行
          //this.InitWebSocket()
         // this.setInit()
        },
         destroyed: function() {
            //页面销毁时关闭长连接
            //this.over();
        },
        methods: {
             //伟明方式
            //  handelStudentWs() {
            //     let self = this
            //     self.global.ws.onmessage = function(b) {
            //         const redata = JSON.parse(b.data)
            //         console.log(b.data,99)
            //         if (redata.type == 20) {
            //             //开启问题交流
            //             // console.log(20)
            //             self.limts = true
            //         } else if (redata.type == 21) {
            //             //关闭问题交流
            //             // console.log(21)
            //            self.limts = false
            //         }
            //     }
            // },
            //通知webSocket
            InitWebSocket() {
                let self = this;
                let hostname = window.location.host;
                const wsuri = "ws://" + hostname + "/tes/ws/global";
                self.websock = new WebSocket(wsuri);
                self.websock.onopen = self.websocketonopen;
                self.websock.onmessage = self.websocketonmessage;
                self.over = () => {
                    self.websock.close();
                };
            },
              websocketonopen(){
                console.log('open sucess')
            },
             websocketonmessage(e) {
                //数据接收
                let self = this
                const redata = JSON.parse(e.data)
                if (redata.type == 20) {
                    //开启问题交流
                    self.limts = true
                } else if (redata.type == 21) {
                    //关闭问题交流
                    self.limts = false
                }
            },
            //初始化
            init() {
                let self = this
                self.$http.get('/tes/problemCommunication/problemDetail/'+self.id ).then((response) => { // 1 换成
                    let res = response.data
                    if(res.code == '200') {
                        self.list=res.data
                        self.replay=res.data.listReply
                        self.forbidden=res.data.forbidden
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //配置简化
             setInit(){
                this.$nextTick(item=>{
                    this.$refs.youquestion.toolbars= {
                        bold: true, // 粗体
                        italic: false, // 斜体
                        header: true, // 标题
                        quote: true, // 引用
                        ol: true, // 有序列表
                        ul: true, // 无序列表
                        imagelink: true, // 图片链接
                        code: true, // code
                        table: true, // 表格
                        help: true, // 帮助
                        alignleft: true, // 左对齐
                        aligncenter: true, // 居中
                        alignright: true, // 右对齐
                        preview: true // 预览
                    }
                })
            },
            //回答提交
            submit(){
                let self = this
                let answer=this.$refs.youquestion.value
                $('#course-detail .v-note-show ').html('')
                self.$http.post('/tes/problemCommunication/toAnswer',{
                    problemId: self.id,
                    courseId:self.courseId,
                    answerContent:answer,
                    htmlContent: self.$refs.youquestion.getRender()
                }).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.$message({
                            message: '添加成功',
                            type: 'success'
                        })
                        self.init()
                         self.$refs.youquestion.value=''
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //详情禁言
            ForbiddeWords(id,courseId,forbidden,userName){
                let self = this
                self.$confirm('是否对'+userName+'禁言?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(() => {
				self.$http.post('/tes/problemCommunication/forbiddenWords',{
                     userId:id,
                     courseId:courseId,
                     isForbidden:!forbidden
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$message({
                            message: '禁言成功',
                            type: 'success'
                        })
                       self.init()
                    }else{
                        self.$message.error(res.message)
                    }
                    },(err) => {
						console.log('err');
                    })
                 }).catch(() => {
			   })
            },
        },
         watch: {
            'websockMsg': {
                handler: function(newval , oldval) {
                    let self = this
                    //console.log(newval)
                    if (newval.type == 20) {
                       //开启问题交流
                        self.limts = true
                        self.$localstorage.putLocalStorage('limts', true) //设置值
                    } else if (newval.type == 21) {
                        //关闭问题交流
                        self.limts = false
                        self.$localstorage.putLocalStorage('limts', false) //设置值
                    }
                }
            },
            deep: true
        }
    }
</script>
<style scoped>
    .s-part2{
        margin: 0
    }
   .artical>p, .my-info-bot-count>p{
       line-height: 26px;
   }
    .s-part2>>>#main>>>.v-note-wrapper{
        z-index: 1
     }
     .youquestion>>>.v-note-wrapper {
        height: 300px;
    }
   .youquestion>>>.fullscreen{
        height: auto !important;
    }
    .youquestion>>>.fullscreen{
       top: 60px !important;
    }
</style>
<style scoped lang="scss">
 @import "./../../../styles/layout/color_variables";
 #InflowDetail {
    width: $width;
    margin: 0px auto;
    color: #727272;
    .questionall{
        overflow:hidden;
        padding:10px 0;
        .tilt{
            width: 1000px;
            line-height: 25px;
            font-size: 16px;
        }
         .btn-group>span{
            font-size:$fs14;
            color:$table-gray
         }
        .countinfo{
            .timeicon{
                margin:0 8px;
                    .times{
                        color:$table-gray;
                    }
            }
            .studentname{
              margin:0 10px;
              color:$table-gray;
            }
            img{
              border-radius: 50%;
              width:50px;
              height:50px;
           }
        }
        .question-count{
            padding:20px 0;
            .artical{
                line-height:25px;
                margin-bottom:25px;
            }
        }
    }
    .my-reply{
        margin-bottom:50px;
        .title{
            border-bottom:1px solid #e8e8e8;
            height:35px;
            line-height:35px;
            color:$table-gray;
        }
        .my-reply-li{
             .Forbidden{
                margin-top: 13px;
                margin-right: 30px;
                .Forbidden-btn{
                    width: 65px;
                    height: 25px;
                    border: 1px solid #2b85ed;
                    border-radius: 20px;
                    color: #2b85ed;
                    cursor: pointer;
                }
                .Forbidden-btn-dark{
                     width: 65px;
                    height: 25px;
                    border: 1px solid #999999;
                    border-radius: 20px;
                    color: #999999;
                    cursor: pointer;

                }
           }
            border-bottom:1px solid #e8e8e8;
            padding:30px 0;
            overflow:hidden;
            .Forbidden-btn{
                width: 65px;
                height: 25px;
                border: 1px solid #2b85ed;
                border-radius: 20px;
                color: #2b85ed;
                cursor: pointer;
            }
            .my-img{
                img{
                    border-radius: 50%;
                    width:50px;
                    height:50px;
                }
            }
            .my-info{
                margin:10px 20px;
                width: 90%;
               .my-info-top{
                   padding-bottom:20px;
                   .teacher{
                        position: relative;
                        left: -64px;
                        color: #fff;
                        font-size: 14px;
                        font-weight: normal;
                        top: 1px;
                   }
                   .teachername{
                      #triangle-left{
                        width:0px;
                        height:0px;
                        border-top:12px solid transparent;
                        border-bottom:12px solid transparent;
                        border-right:16px solid $blue;
                        display:inline-block;
                        vertical-align: middle
                        }
                      .square{
                        width: 66px;
                        height: 24px;
                        background: $blue;
                        display: inline-block;
                        margin-left: -5px;
                        margin-bottom: -8px
                      }
                   }
                    .stuname{
                        color:$table-gray;
                    }
                    .timeicon{
                         margin:0 8px;
                        // margin-left: -17px;
                        .times{
                            color:$table-gray;
                        }

                    }
               }
               .my-info-bot{
                   .my-info-bot-count{
                      width:1000px;
                      line-height: 25px;
                   }
               }

            }
        }
    }
    .you-reply{
        .title{
            border-bottom:1px solid #e8e8e8;
            height:35px;
            line-height:35px;
            color:$table-gray;
        }
        .youquestion{
            margin-top:10px;
        }
        .btn-group {
            text-align: center;
            margin-top: 40px;
        }
        .question-submit-dark{
             border: 1px solid #999999;
            height: 32px;
            width: auto;
            text-align: center;
            vertical-align: middle;
            line-height: 30px;
            color: #999999;
            cursor: pointer;
            border-radius: 20px;
            padding: 0 16px;
            font-size: 14px;
            display: inline-block;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
    }
 }
</style>
